<template>
  <div class="login">
    <div class="biao">
      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <h2>用户登录</h2>
        <el-form-item label="用户名">
          <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="formLabelAlign.password"></el-input>
        </el-form-item>
        <button class="btn" @click="dianji">登录</button>
      </el-form>
    </div>
  </div>
</template>

<script>
import {login} from "../api/api.js"
import {mapMutations} from 'vuex'
export default {
  name: 'Login',
  data () {
    return {
      labelPosition: 'top',
      formLabelAlign: {
        name: '',
        password: ''
      }
    }
  },
  created(){
    
  },
  methods:{

    ...mapMutations([
        'setTokenn'
    ]),
    denglu(){
      login({
        "username":this.formLabelAlign.name,
        "password":this.formLabelAlign.password
      }).then(res=>{
        if(res.data.meta.status == 400){
          alert('登录账号或密码不对')
          
        }else if(res.data.meta.status == 200){
          alert("登录成功");
          this.$router.push('/Backstage')
          this.setTokenn(res.data.data.token)
        }
        console.log(res)
        console.log(this.formLabelAlign.name)
        console.log(this.formLabelAlign.password)
      })
    },
    
    //点击登陆
    dianji(){
      this.denglu()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login{
  background-image: url('../assets/56e0e96c6a03f.jpg');
  background-repeat:no-repeat;
  background-size:1920px 1048px;
  height:100vh;
  position: relative;
}
.biao{
  width:355px;
  border-radius: 5px;
  background-color: #fff;
  padding:30px;
  position: absolute;
  top:50%;
  margin-top: -180px;
  left: 20%;
}
.btn{
  height:40px;
  width: 355px;
  border: none;
  background-color: #409eff;
  font-size: 12px;
  color:#fff;
  letter-spacing:2px;
  border-radius: 5px;
}
.btn:hover{
  background-color: #66B1FF;
}
</style>
